<template>
    <div class="wrapper">
        <div class="main-main">
            <div class="main-top">
                <div class="main-top-left">
                    <dv-decoration-8 :reverse="true" style="width:auto;height:0.8rem;" />
                </div>
                <div class="main-top-center">
                    <div class="main-top-center-top">
                        <p>人脸识别借书系统</p>
                    </div>
                    <div>
                        <dv-decoration-3 style="width:auto;height:0.3rem;" />
                    </div>
                </div>
                <div class="main-top-bottom">
                    <dv-decoration-8 style="width:auto;height:0.8rem;" />
                </div>
            </div>
            <div class="main-center">
                <div class="main-center-border-left">
                    <dv-decoration-2 :reverse="true" style="width:0.1rem;height:10rem;" />
                </div>
                <div class="main-center-content">
                    <div class="main-center-content-left">
                        <mainLeft></mainLeft>
                    </div>
                    <div class="main-center-content-center">
                        <mainCenter></mainCenter>
                    </div>
                    <div class="main-center-content-right">
                        <mainRight></mainRight>
                    </div>
                </div>
                <div class="main-center-border-right">
                    <dv-decoration-2 :reverse="true" style="width:0.1rem;height:10rem;" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mainLeft from "./mainLeft/mainLeft";
    import mainCenter from "./mainCenter/mainCenter";
    import mainRight from "./mainRight/mainRight";
    export default {
        name: "firstPage",
        components:{
            mainLeft,
            mainCenter,
            mainRight
        }
    }
</script>

<style scoped lang="less">
    /*.back{*/
    /*    width:100%;*/
    /*    height:100%;  !**宽高100%是为了图片铺满屏幕 *!*/
    /*    z-index:-1;*/
    /*    position: absolute;*/
    /*}*/
    .wrapper{
        width: 100%;
        height: 11.5rem;
        background: url("../../assets/back.png") no-repeat;
        /*background-size: 100% 100%;*/
        /*filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";*/
        /*-moz-background-size:100% 100%;*/
        background-size: cover;
        .main-main{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .main-top{
                height: 1rem;
                width: 100%;
                display: flex;
                .main-top-left{
                    flex: 2;
                }
                .main-top-center{
                    flex: 1;
                    display: flex;
                    flex-flow: column nowrap;
                    .main-top-center-top{
                        display: flex;
                        justify-content: center;
                        color: orange;
                        font-size: 0.25rem;
                    }
                }
                .main-top-bottom{
                    flex: 2;
                }
            }
            .main-center{
                display: flex;
                justify-content: space-between;
                /*margin-top: 0.25rem;*/
                .main-center-border-left{

                }
                .main-center-content{
                    display: flex;

                }
                .main-center-border-right{

                }
            }
        }
    }
    .back{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -130;
    }
</style>
